﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
*{
    margin:0;
    padding:0;
    border:none;
    font-size:1.5625vw;
    }
    
    /*设置页面高度、宽度*/
    html,body
    {
        height:100%;
        width:100%;
        }
    
    /*右上角音乐图标*/
    #music
    {
        position:fixed;
        top:3vh;
        right:4vw;
        z-index:5;
        width:15vw;
        height:15vw;
        border:4px solid #ef1639;
        border-radius:50%;
        background:#fff;
        }
    
    /*右上角音乐图标*/
    #music >img:first-of-type
    {
        position:absolute;
        top:24%;
        right:2.5%;
        width:28.421%;
        z-index:1;
        }
        
    /*右上角音乐图标*/
    #music >img:last-of-type
    {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        width:79%;
        z-index:0;
        }
        
    #music > img.play
    {
        -webkit-animation:music_disc 4s linear infinite;
         -o-animation:music_disc 4s linear infinite;
          -ms-animation:music_disc 4s linear infinite;
           animation:music_disc 4s linear infinite;
        }
        @-webkit-keyframes music_disc
        {
        0%{
                -webkit-transform:rotate(0deg);
                -ms-transform:rotate(0deg); 
                -o-transform:rotate(0deg);
                transform:rotate(0deg);    
            }
            100%{
                -webkit-transform:rotate(360deg);
                -ms-transform:rotate(360deg); 
                -o-transform:rotate(360deg);
                transform:rotate(360deg);    
            }
        }
        
        @-o-keyframes music_disc
        {
        0%{
                -webkit-transform:rotate(0deg);
                -ms-transform:rotate(0deg); 
                -o-transform:rotate(0deg);
                transform:rotate(0deg);    
            }
            100%{
                -webkit-transform:rotate(360deg);
                -ms-transform:rotate(360deg); 
                -o-transform:rotate(360deg);
                transform:rotate(360deg);    
            }
        }
    
    /*页面背景*/
    .page
    {
        position:absolute;
        height:100%;
        width:100%;
        }
    
    .page > .bg
    {
        height:100%;
        width:100%;
        z-index:-1;
        } 
    
    #page1
    {
        display:block;
        }
         #page2
    {
        display:none;
        }
         #page3
    {
        display:none;
        }
     
    
    /*第一页背景*/
    #page1 > .bg
    {
        background:url("../HTML5/imgs/p1_bg.jpg") no-repeat center center;
        background-size:100%;
        }
        
    #page1 > .p1_lantern
    {
        position:absolute;
        top:-2.4%;
        right:0;
        left:0;
        margin:auto;
        background:url("../HTML5/imgs/p1_lantern.png") no-repeat center bottom;
        background-size:100%;
        width:45vw;
        height:71.2vh;
        font-size:3.506rem;
        padding-top:31vh;
        text-align:center;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        -o-box-sizing:border-box;
        box-sizing:border-box;
        }
        
    #page1 > .p1_lantern:before
    {
        position:absolute;
        top:26.2vh;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
        content:"";
        border-radius:50%;
        margin:0;
        width:30vw;
        height:30vw;
        background:#d60b3b;
        opacity:.5;
        -webkit-box-shadow:0 0 10vw #d60b3b
        -moz-box-shadow:0 0 10vw #d60b3b
        -ms-box-shadow:0 0 10vw #d60b3b
        -o-box-shadow:0 0 10vw #d60b3b
        box-shadow:0 0 10vw #d60b3b
        
        -webkit-animation:p1_lantern .5s infinite alternate;
        -o-animation:p1_lantern .5s infinite alternate;
        animation:p1_lantern .5s infinite alternate;
    }
    @keyframes p1_lantern
    {
        0%
        {
           opacity:.5;
           -webkit-transform:scale(.8,.8);
           transform:scale(.8,.8);
        }
        100%
        {
           opacity:1;
          
        }
    }
    
    
    
    /*第一页底部的小木*/
    #page1 > .p1_imooc
    {
        position:absolute;
        right:0;
        bottom:9vh;
        left:0;
        background:url("../HTML5/imgs/p1_imooc.png") no-repeat center center;
        background-size:100%;
        width:27.656vw;
        height:18.63vh;
        margin:auto;
        }
    
    /*第一页底部文字*/    
    #page1 > .p1_words
    {
        font-size:2.134rem;
        position:absolute;
        right:0;
        left:0;
        bottom:48px;
        text-align:center;
        color:#231815;
        }
        
    
      
     /*第二页背景*/   
    #page2 > .bg
    {
        background:url("../HTML5/imgs/p2_bg.jpg") no-repeat center center;
        background-size:100%;
        }
        
    #page2 > .p2_circle
    {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        border-radius:50%;
        background:url("../HTML5/imgs/p2_circle_middle.png") no-repeat center center;
        background-sizing:100%;
        width:39.9375vw;
        height:39.9375vh;
        }
        
    #page2 >.p2_circle:before
    {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        }
     
    #page2 >.p2_circle:after
    {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        } 
        
    -webkit-animation:p2_circle_inner 1s linear 1s infinite;
    animation:p2_circle_inner 1s linear 1s infinite;
    
        
    #page2 > .p2_2016
    {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        content:"";
        background:url("../HTML5/imgs/p2_2016.png") no-repeat center center;
        background-sizing:100%;
        width:27.5vw;
        height:6.24vh;
        }
         
    /*第三页背景*/    
    #page3 > .bg
    {
        background:url("../HTML5/imgs/p3_bg.jpg") no-repeat center center;
        background-size:100%;
        }    
    
    #page3 > .p3_logo
    {
        position:absolute;
        width:34.6875vw;
        height:6.327vh;
        left:0;
        right:0;
        margin:auto;
        top:7.82vh;
        background:url("../HTML5/imgs/p3_logo.png") no-repeat center center;
        background-sizing:100%;
        } 
        
    #page3 > .p3_title
    {
        width:48.125vw;
        height:50vh;
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        top:21vh;
        background:url("../HTML5/imgs/p3_title.png") no-repeat center center;
        background-sizing:100%;
        }
        
    #page3 > .p3_second
    {
        width:22.8125vw;
        height:41.652vh;
        position:absolute;
        left:3.75vw;
        margin:auto;
        top:25.48vh;
        background:url("../HTML5/imgs/p3_couplet_second.png") no-repeat center center;
        background-sizing:100%;
        }
    
    #page3 > .p3_first
    {
        width:22.8125vw;
        height:41.652vh;
        position:absolute;
        right:3.75vw;
        margin:auto;
        top:25.48vh;
        background:url("../HTML5/imgs/p3_couplet_first.png") no-repeat center center;
        background-sizing:100%;
        }   
    
    #page3 > .p3_blessing
    {
        width:32vw;
        height:32vw;
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        bottom:10vh;
        border-radius=50%;
        background:url("../HTML5/imgs/p3_blessing.png") no-repeat center center;
        background-sizing:100%;
        }
</style>
</head>
<body>
<div id="music">
    <img src="imgs/music_pointer.png" />
    <img src="imgs/music_disc.png" class="play" />
</div>

<div class="page" id="page1">
    <div class="bg"></div>
    <div class="p1_lantern">点击屏幕<br/>开启好运2017</div>
    <div class="p1_imooc"></div>
    <div class="p1_words">2017年Fly Cheng新年特献</div>
</div>

<div class="page" id="page2">
    <div class="bg"></div>
    <div class="p2_circle"></div>
    <div class="p2_2016"></div>
</div>

<div class="page" id="page3">
    <div class="bg"></div>
    <div class="p3_logo"></div>
    <div class="p3_title"></div>
    <div class="p3_second"></div>
    <div class="p3_first"></div>
    <div class="p3_blessing"></div>
</div>

</body>
</html>
